<template>
    <!-- <div class="content-list"> -->
    <div>
        <!-- 电影展示组件 start -->
        <div class="film-item" v-for="film in list" :key="film.filmId">
            <div class="film-img" :style="`background-image: url(${film.filmImg})`" @click="sendDetail(film.filmId)"></div>
            <div class="film-title">{{film.filmName}}</div>
            <div class="film-source">
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img open"></span>
                <span class="star-img close"></span>
                <span class="star-img close"></span>
                <!-- <span class="star-source">{{getSource}}</span> -->
                <span class="star-source">{{film.source | getSource()}}</span>
            </div>
        </div>
        <!-- 电影展示组件 end -->
    </div>
</template>
<script>
    var filmList = Vue.extend({
        template: document.currentScript.ownerDocument.querySelector("template"),
        data() {
            return {

            }
        },
        props: {
            // film: {
            //     type: Object,
            //     default() {
            //         return {}
            //     }
            // }
            list: {
                type: Array,
                default() {
                    return []
                }
            }
        },
        computed: {
            // getSource() {
            //     return (this.list.source * 1).toFixed(1);
            // }
        },
        filters: {
            getSource(value) {
                return (value * 1).toFixed(1);
            }
        },
        methods:{
            sendDetail(id){
                this.$root.$emit("update:detail","FilmDetail",id);
            }
        }
        // updated(){
        //     console.log(this.list[0]);
        // }
        // beforeUpdate(){
        //     console.log(this.list[0]);
        // }
    })
</script>